<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>用户管理</title>
<!-- Main Stylesheet --> 
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" type="text/css" />
<!-- Your Custom Stylesheet --> 
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/custom.css" type="text/css" />
<%@include file="/include/header.jsp" %>
<link href="<%=request.getContextPath()%>/lib/thickbox/thickbox.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/lib/jquery/jquery.autocomplete.css" type="text/css" rel="stylesheet"/>
<script src="<%=request.getContextPath()%>/lib/jquery/jquery-1.4.2.min.js"></script>
<script src="<%=request.getContextPath()%>/js/administry.js"></script>
<script src="<%=request.getContextPath()%>/lib/validator/formValidator_min.js"></script>
<script src="<%=request.getContextPath()%>/lib/validator/formValidatorRegex.js"></script>
<script src="<%=request.getContextPath()%>/lib/jquery/jquery.form.js"></script>
<script src="<%=request.getContextPath()%>/lib/datepicker/WdatePicker.js"></script>
<script src="<%=request.getContextPath()%>/lib/thickbox/thickbox.js"></script>
<script src="<%=request.getContextPath()%>/lib/jquery/jquery.autocomplete.pack.js"></script>
<script src="<%=request.getContextPath()%>/js/function.js"></script>
<script src="<%=request.getContextPath()%>/js/page/pageRender.js"></script>
<script type="text/javascript">
	function showEditUserForm(a){
		if(a){
			getById("editUser").reset();
			$("#edit_username").val($(a).attr("username"));
			$("#edit_truename").val($(a).attr("truename"));
			$("#edit_nickname").val($(a).attr("nickname"));
			$("#edit_email").val($(a).attr("email"));
			$("#edit_expiredDate").val($(a).attr("expiredDate"));
			$("#edit_birthday").val($(a).attr("birthday"));
			$("#edit_active").val([$(a).attr("active")]);
			showBox("#TB_inline?height=260&width=600&inlineId=edit_container", "修改用户");
		}
	}
	function showAddUserForm(){
		getById("addUser").reset();
		showBox("#TB_inline?height=330&width=600&inlineId=add_container", "增加用户");
	}
	
	<sec:authorize ifAnyGranted="ADMIN,USER_LOCK">
		function lock(isLock){
			var es = document.getElementsByName('code_cbx');
			var ids = [];
			for(var i=0; i<es.length; i++){
				if(es[i].checked){
					ids.push(es[i].value);
				}
			}
			if(ids.length < 1){showTip('请选择用户');return};
			if( confirm("准备提交数据，是否继续？") ){
				Mask.show();
				document.location.href = "<%=request.getContextPath()%>/protected/system/lockUser.action?id="+ids.join(",")+"&isLock="+isLock;
			}
		}
	</sec:authorize>
	<sec:authorize ifAnyGranted="ADMIN,USER_DELETE">
		function del(){
			var es = document.getElementsByName('code_cbx');
			var ids = [];
			for(var i=0; i<es.length; i++){
				if(es[i].checked){
					ids.push(es[i].value);
				}
			}
			if(ids.length < 1){showTip('请选择用户');return};
			if( confirm("准备删除用户，此次操作将无法恢复，是否继续？") ){
				Mask.show();
				document.location.href = "<%=request.getContextPath()%>/protected/system/delUser.action?id="+ids.join(",");
			}
		}
	</sec:authorize>
	<sec:authorize ifAnyGranted="ADMIN,USER_PASSWORD_RESET">
	function resetPassword(code){
		getById('passwordResetForm').reset();
		$("#reset_code").val(code);
		showBox("#TB_inline?height=120&width=500&inlineId=password_reset_area", "重置密码");
	}
	</sec:authorize>
	
$(document).ready(function(){
	Administry.contextBoxInit();
	
	//增加用户表单
	<sec:authorize ifAnyGranted="ADMIN,USER_ADD">
		$.formValidator.initConfig({
  			validatorGroup: "1",
			formID:"addUser",
			onError:function(msg){
				showTip(msg);
			},
			onSuccess:function(){
				if( confirm("准备提交数据，是否继续？") ){
					Mask.show();
					$('#addUser').ajaxSubmit(function(rslt){Ajax.callback(rslt, function(){
						Mask.hide();
						tb_remove();
						doSearch();
					});});
				}
				return false;
			}
		});
		$("#username").formValidator({
  			validatorGroup: "1",
			onShow:"请输入用户名",
			onFocus:"2-30个字符，只能由英文字母、下划线、横线和数字组成",
			onCorrect: "恭喜！此用户名可以使用",
			ajax:true
		}).inputValidator({min:2,max:30}).regexValidator({dataType:"enum", regExp:'username'}).ajaxValidator({
			type:'post',
			url:'<%=request.getContextPath()%>/protected/system/checkNameUser.action',
			data:$("#username"),
			dataType:'json',
			success:function(json){
				return json.data;
			},
			cache:false,
			error:function(){
				showTip("服务器可能 正繁忙，请稍候重试");
			},
			buttons: $('#submitAddUser'),
			onError: "对不起，用户已经存在！"
		});
		$("#password").formValidator({
  			validatorGroup: "1",
			onShow:"请输入密码，可为空",
			onFocus:"5-16个字符",
			onEmpty:"初始密码为123456",
			empty: true
		}).inputValidator({min:5,max:16});
		$("#repeatpwd").formValidator({
  			validatorGroup: "1",
			onShow:"请再次输入密码",
			onFocus:"5-16个字符"
		}).compareValidator({desID:"password", onError:"两次密码输入不一致"});
		$("#nickname").formValidator({
  			validatorGroup: "1",
			onShow:"昵称，可为空",
			empty: true
		}).inputValidator({min:0,max:30});
		$("#truename").formValidator({
  			validatorGroup: "1",
			onShow:"真实姓名，可为空",
			empty: true
		}).inputValidator({min:0,max:30}).regexValidator({dataType:"enum", regExp:'name'});
		$("#email").formValidator({
  			validatorGroup: "1",
			onShow:"电子邮箱，可为空",
			empty: true
		}).regexValidator({dataType:"enum", regExp:'email'});
		$("#expiredDate").formValidator({
  			validatorGroup: "1",
			onShow:"有效期，可为空",
			onFocus:"日期格式：2010-01-01",
			empty: true
		}).regexValidator({dataType:"enum", regExp:'date'});
	</sec:authorize>
	//修改用户表单
	<sec:authorize ifAnyGranted="ADMIN,USER_UPDATE">
		$.formValidator.initConfig({
  			validatorGroup: "3",
			formID:"editUser",
			onError:function(msg){
				showTip(msg);
			},
			onSuccess:function(){
				if( confirm("准备提交数据，是否继续？") ){
					Mask.show();
					$('#editUser').ajaxSubmit(function(rslt){Ajax.callback(rslt, function(){
						Mask.hide();
						tb_remove();
						doSearch();
					});});
				}
				return false;
			}
		});
		$("#edit_username").formValidator({
  			validatorGroup: "3",
			onShow:"只读，不可修改",
			onFocus:"只读，不可修改"
		});
		$("#edit_nickname").formValidator({
  			validatorGroup: "3",
			onShow:"昵称，可为空",
			empty: true
		}).inputValidator({min:0,max:30});
		$("#edit_truename").formValidator({
  			validatorGroup: "3",
			onShow:"真实姓名，可为空",
			empty: true
		}).inputValidator({min:0,max:30}).regexValidator({dataType:"enum", regExp:'name'});
		$("#edit_email").formValidator({
  			validatorGroup: "3",
			onShow:"电子邮箱，可为空",
			empty: true
		}).regexValidator({dataType:"enum", regExp:'email'});
		$("#edit_expiredDate").formValidator({
  			validatorGroup: "3",
			onShow:"有效期，可为空",
			onFocus:"日期格式：2010-01-01",
			empty: true
		}).regexValidator({dataType:"enum", regExp:'date'});
	</sec:authorize>
	//密码重置表单
	<sec:authorize ifAnyGranted="ADMIN,USER_PASSWORD_RESET">
		$.formValidator.initConfig({
  			validatorGroup: "2",
			formID:"passwordResetForm",
			onError:function(msg){
				showTip(msg);
			},
			onSuccess:function(){
				if( confirm("准备提交数据，是否继续？") ){
					Mask.show();
					$('#passwordResetForm').ajaxSubmit(function(rslt){Ajax.callback(rslt, function(){
						Mask.hide();
						tb_remove();
						doSearch();
					});});
				}
				return false;
			}
		});
		$("#reset_newpwd").formValidator({
  			validatorGroup: "2",
			onShow:"请输入新密码",
			onFocus:"5-16个字符"
		}).inputValidator({min:6,max:16});
		$("#reset_repeatpwd").formValidator({
  			validatorGroup: "2",
			onShow:"请再次输入密码",
			onFocus:"5-16个字符"
		}).compareValidator({desID:"reset_newpwd", onError:"两次密码输入不一致"});
	</sec:authorize>
	
	//AutoComplete用户名关键字输入框
	$("#s_username").autocomplete(
	'<%=request.getContextPath()%>/protected/system/autoCompleteUser.action',
	{
		width: 160,
		max: 10,
		scroll: true,
		scrollHeight: 300,
		dataType: 'json',
		matchCase:true,
		parse: function(data) {
			if(!isArray(data)){
				data = eval("("+data+")");
			}
			var rows = [];
			for(var i=0; i<data.length; i++){
				rows.push({
					"data" : data[i],
					"value" : data[i][1],
					"result" : this.formatResult && this.formatResult(data[i], data[i][0]) || data[i][0]
				});
			}
			return rows;
		},
		formatItem: function(data, i, total) {
			var truename = data[1] || null;
			var nickname = data[2] || null;
			var item = data[0];
			if(truename) item += " | " + truename;
			if(nickname) item += " | " + nickname;
			return item;
		}
	});
});
	window.onload = init;
	function init(){
		pageBar = new PageRender({
			method: 'post',
			url:'<%=request.getContextPath()%>/protected/system/listUser.action',
			start: <s:property value="start"/>,
			limit: <s:property value="limit"/>,
			total: <s:property value="total"/>,
			data: {
				"username": "#s_username",
				"startDate": "#s_startDate",
				"endDate": "#s_endDate",
				"orderby": "#orderby",
				"active": "#active",
				"locked": "#locked"
			},
			renderTo: "page_bar"
		});
	}
  	
	function doSearch(){
		Mask.show();
		pageBar.position(1);
	}
</script>
</head>
<body style="background-color: #fff;">
	<%@include file="/include/body.jsp" %>
	
<s:if test="flag">
	<!-- 显示操作成功 -->
	<script type="text/javascript">
		showTip("操作成功");
	</script>
</s:if>

<!-- Wrapper -->
<div class="wrapper">
	
    <div class="content-box resizable" id="query_area">
    	<header>
			<h3>搜索</h3>
		</header>
		<section>
		<table class="no-style">
			<tbody>
			<tr>
				<td>
		        	<span>用户名关键字:
		        		<input id="s_username" type="text" name="s_username" value="<s:property value="username"/>" style="width:100px;" />
		        	</span>
		        	<span>起始日期:
		        		<input id="s_startDate" type="text" name="s_startDate" style="width:100px;" onfocus="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd'});" value="<s:property value="startDate"/>"/>
		        	</span>
		        	<span>结束日期:
		        		<input id="s_endDate" type="text" name="s_endDate" style="width:100px;" onfocus="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd'});" value="<s:property value="endDate"/>" />
		        	</span>
			    	<span>启用状态：
			    		<s:select id="active" value="active" theme="simple" 
				   			list="#{'2':'全部','1':'启用','0':'禁用'}">
				   		</s:select>
			    	</span>
			    	<span>锁定状态：
			    		<s:select id="locked" value="locked" theme="simple" 
				   			list="#{'2':'全部','0':'未锁定','1':'锁定'}">
				   		</s:select>
			    	</span>
		            <span>
						<button class="btn" type="submit" onclick="doSearch();"><span class="icon icon-search"></span>搜 索</button>
					</span>
				</td>
			</tr>
			</tbody>
		</table>
		</section>
	</div>
	<div class="content-box" id="show_area">
	<header>
		<h3>
			<span>用户列表</span>
	    	<span>排序：
	    		<s:select id="orderby" value="orderby" onchange="doSearch();" theme="simple" 
		   			list="#{' order by createTime desc':'创建时间：降序',' order by createTime asc':'创建时间：升序',' order by loginTimes desc':'登录次数 降序',' order by loginTimes asc':'登录次数 升序',' order by username asc':'用户名 升序'}">
		   		</s:select>
	    	</span>
		</h3>
		<div>
   		<span>
   			<a class="btn btn-gray" href="javascript:void(0)" onclick="doSearch();"><span class="icon icon-refresh"></span>刷新</a>
   		</span>
	 	<sec:authorize ifAnyGranted="ADMIN,USER_ADD">
    		<span>
    			<a class="btn" href="javascript:void(0)" onclick="showAddUserForm();"><span class="icon icon-user-add"></span>增加..</a>
    		</span>
    	</sec:authorize>
    	<sec:authorize ifAnyGranted="ADMIN,USER_LOCK">
   		<span><a class="btn" href="javascript:void(0)" onclick="lock(true);" title="锁定的用户将无法登录系统"><span class="icon icon-lock"></span>锁定</a></span>
   		<span><a class="btn" href="javascript:void(0)" onclick="lock(false);" title="锁定的用户将无法登录系统"><span class="icon icon-unlock"></span>解除</a></span>
	    </sec:authorize>
   		<sec:authorize ifAnyGranted="ADMIN,USER_DELETE">
    	<span>
    		<span>
    			<a class="btn" href="javascript:void(0)" onclick="del();"><span class="icon icon-user-del"></span>删除</a>
    		</span>
    	</span>
    	</sec:authorize>
    	</div>
	</header>
	<section>
     <table class="display stylized" id="data_table">
     	<thead>
		<tr>
			<th width="30"><input type="checkbox" name="all_cbx" title="全选 " onclick="checkAll(this, 'code_cbx')"/></th>
			<th>序号</th><th>用户名</th><th>真实姓名</th>
			<th>昵称</th><th>Email</th><th>上次登录</th><th>登录次数</th>
			<th>创建时间</th><th >启用状态</th><th>锁定状态</th>
			<th>有效期</th><th width="120">操作</th>
		</tr>
		</thead>
		<tbody>
		<s:if test="users != null">
			<s:iterator value="users" status="userstatus">
				<tr>
					<td><input type="checkbox" name="code_cbx" value="<s:property value="username"/>"/></td>
					<td><s:property value="#userstatus.index + 1 + start"/></td>
			 		<td><s:property value="username"/></td>
			 		<td><s:property value="truename"/></td>
			 		<td><s:property value="nickname"/></td>
			 		<td><s:property value="email"/></td>
			 		<td><s:property value="lastLoginTimeText"/></td>
			 		<td><s:property value="loginTimes"/></td>
			 		<td><s:date name="createTime" format="yyyy-MM-dd HH:mm"/></td>
			 		<td>
			 			<s:if test="active"><img src="<%=request.getContextPath()%>/images/icons/tick.png" alt="是" title="是"/></s:if>
			 			<s:else><img src="<%=request.getContextPath()%>/images/icons/cross.png" alt="否" title="否"/></s:else>
			 		</td>
			 		<td>
			 			<s:if test="locked"><img src="<%=request.getContextPath()%>/images/icons/tick.png"/></s:if>
			 			<s:else><img src="<%=request.getContextPath()%>/images/icons/cross.png" alt="否" title="否"/></s:else>
			 		</td>
			 		<td><s:date name="expiredDate" format="yyyy-MM-dd"/></td>
			 		<td style="white-space:nowrap">
			 		<sec:authorize ifAnyGranted="ADMIN,USER_PASSWORD_RESET">
			 			<a href="javascript:void(0);" onclick="resetPassword('<s:property value="username"/>');">［密码重置..］</a>
			 		</sec:authorize>
			 		<sec:authorize ifAnyGranted="ADMIN,USER_UPDATE">
			 			<a href="javascript:void(0);" 
			 			username="<s:property value="username"/>" 
			 			truename="<s:property value="truename"/>" 
			 			nickname="<s:property value="nickname"/>" 
			 			email="<s:property value="email"/>"
						active="<s:property value="active"/>" 
						expiredDate="<s:date name="expiredDate" format="yyyy-MM-dd"/>"
						onclick="javascript:showEditUserForm(this);">［更改..］</a>
			 		</sec:authorize>
			 		<s:if test="! locked">
			 		<sec:authorize ifAnyGranted="ADMIN,USER_DELETE">
			 			<a href="javascript:void(0);" onclick="if(confirm('是否删除用户？')){document.location.href='<s:url value='delUser.action?id=%{username}'/>';}">［删除］</a>
			 		</sec:authorize>
			 		</s:if>
			 		</td>
			 	</tr>
			</s:iterator>
		 </s:if>
		 </tbody>
	</table>
	<div id="page_bar"></div>
	</section>
	</div>
</div>

<!-- 表单区域 -->
<sec:authorize ifAnyGranted="ADMIN,USER_PASSWORD_RESET">
<div id="password_reset_area" style="display:none;">
	 <div id="password_reset_area_wrap">
		<form id="passwordResetForm" action="<%=request.getContextPath()%>/protected/system/resetPasswordUser.action" method="post">
		<input id="reset_code" type="hidden" name="id" value=""/>
		<table class="no-style">
			<tr>
				<td><label class="required">新密码</label></td>
				<td><input id="reset_newpwd" type="password" name="newpwd" value=""/></td>
				<td><div id="reset_newpwdTip"></div></td>
			</tr>
			<tr>
				<td><label class="required">重复新密码</label></td>
				<td><input id="reset_repeatpwd" type="password" name="_repeatpwd" value=""/></td>
				<td><div id="reset_repeatpwdTip"></div></td>
			</tr>
		</table>
		<div class="form-btn">
			<button class="btn btn-green" type="submit"><span class="icon icon-ok"></span>提 交</button>
			<button class="btn" type="reset" onclick="javascript:tb_remove();"><span class="icon icon-close"></span>取消</button>
		</div>
		</form>
	</div>
</div>
</sec:authorize>

<div id="add_container" style="display:none;">
	 <div id="add_area">
	 <sec:authorize ifAnyGranted="ADMIN,USER_ADD">
		<s:form id="addUser" action="addUser.action" method="post">
		<table class="no-style">
			<tr>
				<td><label class="required">用户名</label></td>
				<td><input type="text" id="username" name="user.username" value=""/></td>
				<td><div id="usernameTip"></div></td>
			</tr>
			<tr>
				<td><label>密码</label></td>
				<td><input id="password" type="password" name="user.password" value=""/></td>
				<td><div id="passwordTip"></div></td>
			</tr>
			<tr>
				<td><label>重复密码</label></td>
				<td><input id="repeatpwd" type="password" name="repeatpwd" value=""/></td>
				<td><div id="repeatpwdTip"></div></td>
			</tr>
			<tr>
				<td><label>真实姓名</label></td>
				<td><input type="text" id="truename" name="user.truename" value=""/></td>
				<td><div id="truenameTip"></div></td>
			</tr>
			<tr>
				<td><label>昵称</label></td>
				<td><input type="text" id="nickname" name="user.nickname" value=""/></td>
				<td><div id="nicknameTip"></div></td>
			</tr>
			<tr>
				<td><label>Email</label></td>
				<td><input type="text" id="email" name="user.email" value=""/></td>
				<td><div id="emailTip"></div></td>
			</tr>
			<tr>
				<td><label>启用状态</label></td>
				<td><input id="active" type="checkbox"  name="user.active" value="true"/></td>
				<td></td>
			</tr>
			<tr>
				<td><label>有效期</label></td>
				<td>
					<input type="text" id="expiredDate" onfocus="WdatePicker({startDate:'#{%y+1}-%M-%d',dateFmt:'yyyy-MM-dd'});" name="user.expiredDate"/>
				</td>
				<td><div id="expiredDateTip"></div></td>
			</tr>
		</table>
		<div class="form-btn">
			<button class="btn btn-green" id="submitAddUser" type="submit"><span class="icon icon-ok"></span>提 交</button>
			<button class="btn" type="reset" onclick="javascript:tb_remove();"><span class="icon icon-close"></span>取消</button>
		</div>
		</s:form>
	</sec:authorize>
	</div>
</div>
<div id="edit_container" style="display:none;">
	 <div id="edit_area">
	 <sec:authorize ifAnyGranted="ADMIN,USER_ADD">
		<s:form id="editUser" action="editUser.action" method="post">
		<table class="no-style">
			<tr>
				<td><label>用户名</label></td>
				<td><input class="readonly" type="text" id="edit_username" name="user.username" value="" readonly/></td>
				<td><div id="edit_usernameTip"></div></td>
			</tr>
			<tr>
				<td><label>真实姓名</label></td>
				<td><input type="text" id="edit_truename" name="user.truename" value=""/></td>
				<td><div id="edit_truenameTip"></div></td>
			</tr>
			<tr>
				<td><label>昵称</label></td>
				<td><input type="text" id="edit_nickname" name="user.nickname" value=""/></td>
				<td><div id="edit_nicknameTip"></div></td>
			</tr>
			<tr>
				<td><label>Email</label></td>
				<td><input type="text" id="edit_email" name="user.email" value=""/></td>
				<td><div id="edit_emailTip"></div></td>
			</tr>
			<tr>
				<td><label>启用状态</label></td>
				<td><input id="edit_active" type="checkbox"  name="user.active" value="true"/></td>
				<td></td>
			</tr>
			<tr>
				<td><label>有效期</label></td>
				<td>
					<input type="text" id="edit_expiredDate" onfocus="WdatePicker({startDate:'#{%y+1}-%M-%d',dateFmt:'yyyy-MM-dd'});" name="user.expiredDate"/>
				</td>
				<td><div id="edit_expiredDateTip"></div></td>
			</tr>
		</table>
		<div class="form-btn">
			<button class="btn btn-green" type="submit"><span class="icon icon-ok"></span>提 交</button>
			<button class="btn" type="reset" onclick="javascript:tb_remove();"><span class="icon icon-close"></span>取消</button>
		</div>
		</s:form>
	</sec:authorize>
	</div>
</div>
</body>
</html>